<script>
	import {mapState} from "vuex";
	// 引包
	import Swiper from "swiper";
	
	export default {
		name: 'ListContainer',
		mounted() {
			// 组件挂载完毕，正常说组件结构（DOM）已经全有了
			// 为什么swiper实例在mounted中直接书写不可以，因为结构还没有完整
			
			// 派发action，通知Vuex发起ajax请求，将数据存储在仓库中
			this.$store.dispatch('getBannerList');
			// 在new Swiper之前，页面的结构必须要有，但是把new Swiper放在mounted中是不行的
			// 为什么？因为dispatch中涉及到异步语句，导致v-for遍历的时候结构还没有完整，因此不行
		},
		computed: {
			...mapState({
				bannerList: state => state.home.bannerList
			})
		},
		// 下列watch废弃，但是保留是为了查看注释
		watch: {
			// 监听bannerList数据的变化，因为这条数据发生过变化---由空数组变为数组里面有四个元素
			bannerList: {
				immediate: true,
				handler(newValue, oldValue) {
					// 通过watch监听bannerList属性的属性值的变化
					// 如果执行handler方法，代表组件实例的属性已经有值了
					// 当这个函数执行，只能保证bannerList有数据，但v-for是否执行完还不知道
					// 但是只有v-for执行完，才算是有了结构，但在watch中无法确定
					
					// nextTick：在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM
				}
			}
		}
	}
</script>

<template>
	<div class="list-container">
		<div class="sortList clearfix">
			<div class="center">
				<!--banner轮播-->
				<Carousel :list="bannerList"></Carousel>
			</div>
			<div class="right">
				<div class="news">
					<h4>
						<em class="fl">尚品汇快报</em>
						<span class="fr tip">更多 ></span>
					</h4>
					<div class="clearix"></div>
					<ul class="news-list unstyled">
						<li>
							<span class="bold">[特惠]</span>备战开学季 全民半价购数码
						</li>
						<li>
							<span class="bold">[公告]</span>备战开学季 全民半价购数码
						</li>
						<li>
							<span class="bold">[特惠]</span>备战开学季 全民半价购数码
						</li>
						<li>
							<span class="bold">[公告]</span>备战开学季 全民半价购数码
						</li>
						<li>
							<span class="bold">[特惠]</span>备战开学季 全民半价购数码
						</li>
					</ul>
				</div>
				<ul class="lifeservices">
					<li class=" life-item ">
						<i class="list-item"></i>
						<span class="service-intro">话费</span>
					</li>
					<li class=" life-item ">
						<i class="list-item"></i>
						<span class="service-intro">机票</span>
					</li>
					<li class=" life-item ">
						<i class="list-item"></i>
						<span class="service-intro">电影票</span>
					</li>
					<li class=" life-item ">
						<i class="list-item"></i>
						<span class="service-intro">游戏</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">彩票</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">加油站</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">酒店</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">火车票</span>
					</li>
					<li class=" life-item ">
						<i class="list-item"></i>
						<span class="service-intro">众筹</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">理财</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">礼品卡</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">白条</span>
					</li>
				</ul>
				<div class="ads">
					<img src="./images/ad1.png"/>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="less">
	.list-container {
		width: 1200px;
		margin: 0 auto;
		
		.sortList {
			height: 464px;
			padding-left: 210px;
			
			.center {
				box-sizing: border-box;
				width: 740px;
				height: 100%;
				padding: 5px;
				float: left;
			}
			
			.right {
				float: left;
				width: 250px;
				
				.news {
					border: 1px solid #e4e4e4;
					margin-top: 5px;
					
					h4 {
						border-bottom: 1px solid #e4e4e4;
						padding: 5px 10px;
						margin: 5px 5px 0;
						line-height: 22px;
						overflow: hidden;
						font-size: 14px;
						
						.fl {
							float: left;
						}
						
						.fr {
							float: right;
							font-size: 12px;
							font-weight: 400;
						}
					}
					
					.news-list {
						padding: 5px 15px;
						line-height: 26px;
						
						.bold {
							font-weight: 700;
						}
					}
				}
				
				.lifeservices {
					border-right: 1px solid #e4e4e4;
					overflow: hidden;
					display: flex;
					flex-wrap: wrap;
					
					.life-item {
						border-left: 1px solid #e4e4e4;
						border-bottom: 1px solid #e4e4e4;
						margin-right: -1px;
						height: 64px;
						text-align: center;
						position: relative;
						cursor: pointer;
						width: 25%;
						
						.list-item {
							background-image: url(./images/icons.png);
							width: 61px;
							height: 40px;
							display: block;
						}
						
						.service-intro {
							line-height: 22px;
							width: 60px;
							display: block;
						}
						
						&:nth-child(1) {
							.list-item {
								background-position: 0px -5px;
							}
						}
						
						&:nth-child(2) {
							.list-item {
								background-position: -62px -5px;
							}
						}
						
						&:nth-child(3) {
							.list-item {
								background-position: -126px -5px;
							}
						}
						
						&:nth-child(4) {
							.list-item {
								background-position: -190px -5px;
							}
						}
						
						&:nth-child(5) {
							.list-item {
								background-position: 0px -76px;
							}
						}
						
						&:nth-child(6) {
							.list-item {
								background-position: -62px -76px;
							}
						}
						
						&:nth-child(7) {
							.list-item {
								background-position: -126px -76px;
							}
						}
						
						&:nth-child(8) {
							.list-item {
								background-position: -190px -76px;
							}
						}
						
						&:nth-child(9) {
							.list-item {
								background-position: 0px -146px;
							}
						}
						
						&:nth-child(10) {
							.list-item {
								background-position: -62px -146px;
							}
						}
						
						&:nth-child(11) {
							.list-item {
								background-position: -126px -146px;
							}
						}
						
						&:nth-child(12) {
							.list-item {
								background-position: -190px -146px;
							}
						}
					}
				}
				
				.ads {
					margin-top: 5px;
					
					img {
						opacity: 0.8;
						transition: all 400ms;
						
						&:hover {
							opacity: 1;
						}
					}
				}
			}
		}
	}
</style>


